<script setup>
import logo from '../assets/logo.png'
import logo2 from '../assets/logo2.png'
import date from '../assets/date.svg'
import rel from '../assets/banner.png'
import rel2 from '../assets/mtsc.png'
import rel3 from '../assets/banner3.png'
import rel4 from '../assets/banner4.png'
import team from '../assets/team.png'
import team2 from '../assets/team2.png'
import team3 from '../assets/team3.png'
import team4 from '../assets/team4.png'
import team5 from '../assets/team5.png'
import team6 from '../assets/team6.png'
import team7 from '../assets/team7.png'
import team8 from '../assets/docker.png'
import msg from '../assets/msg.png'
import a1 from '../assets/ANDROID.jpg'
import a2 from '../assets/APPLE.jpg'
import a3 from '../assets/CAR.png'
import a4 from '../assets/WATCH.png'
import {useRouter} from "vue-router";

const open = (url) => {
  window.open(url, '_blank')
}
const router = useRouter()
</script>
<template>
  <el-backtop target=".demo-tree-scrollbar .el-scrollbar__wrap"></el-backtop>
  <el-scrollbar class="demo-tree-scrollbar" style="height: 100%">
    <div class="back">
      <img :src="logo2" width="300"/>
      <!--      <h1>开源的云真机测试平台</h1>-->
      <h5 style="color: #909399">Sonic，一站式开源分布式集群云真机测试平台，致力服务于中小企业的客户端UI测试（代码永久免费、开源）</h5>
      <el-tooltip
          effect="dark"
          content="Sonic组织所有仓库总Star数量"
          placement="top"
      >
        <a href="https://github.com/SonicCloudOrg" target="_blank" style="margin-left: 20px"><img
            src="https://img.shields.io/github/stars/SonicCloudOrg?affiliations=OWNER&style=social"/></a>
      </el-tooltip>
      <el-tooltip
          effect="dark"
          content="Sonic社区总回复数"
          placement="top"
      >
        <a href="https://sonic-cloud.wiki" target="_blank" style="margin-left: 20px"><img
            src="https://img.shields.io/badge/replies%20-2.5k-ff69b4?style=social&logo="/></a>
      </el-tooltip>
      <div style="margin-top: 10px">
        <el-tooltip
            effect="dark"
            content="当前最新版本"
            placement="top"
        >
          <a href="https://github.com/SonicCloudOrg" target="_blank"><img
              src="https://img.shields.io/github/v/release/SonicCloudOrg/sonic-agent?include_prereleases"/></a>
        </el-tooltip>
        <el-tooltip
            effect="dark"
            content="Agent端zip资源总下载量"
            placement="top"
        >
          <a href="https://github.com/SonicCloudOrg/sonic-agent/releases" target="_blank" style="margin-left: 20px"><img
              src="https://img.shields.io/github/downloads/SonicCloudOrg/sonic-agent/total"/></a>
        </el-tooltip>
        <el-tooltip
            effect="dark"
            content="新Docker仓库(sonicorg)与旧Docker仓库(zhouyixun)镜像总下载量"
            placement="top"
        >
          <a href="https://hub.docker.com/u/sonicorg" target="_blank" style="margin-left: 20px"><img
              src="https://img.shields.io/badge/docker%20pulls%20-35.7k-important"/></a>
        </el-tooltip>
      </div>
      <div style="padding: 0 20%;">
        <el-divider><span style="color: #606266">For Tester，For Free，Forever</span></el-divider>
      </div>
      <div style="text-align: center">
        <el-button plain type="primary" size="small" @click="open('https://zhuanlan.zhihu.com/p/449187669')">查看演示DEMO
        </el-button>
        <el-badge value="hot" class="item">
          <el-button plain type="primary" size="small" @click="open('https://sonic-cloud.wiki/')"
                     style="margin-left:10px">
            Sonic用户社区
          </el-button>
        </el-badge>
      </div>
      <el-carousel style="margin-top: 30px" height="450px" indicator-position="outside" :interval="3000">
        <el-carousel-item>
          <div
              :style="'background:linear-gradient(to bottom right, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.9)) ,url('+rel+');background-size:cover;height:100%;'"
              class="banner">
            <div>
              <h1 style="color: aliceblue">Sonic云真机测试平台v1.3.2-release已发布！</h1>
              <h3 style="color: aliceblue">在线代理抓包、自动化逻辑控制、Scrcpy投屏等等功能新上线</h3>
              <el-button size="small" type="primary" @click="router.push('/Version')">查看新特性</el-button>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div
              :style="'background:linear-gradient(to bottom right, rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 1)) ,url('+rel2+');background-size:cover;height:100%;'"
              class="banner">
            <div>
              <h1 style="color: #fff">Sonic将在2022年度MSTC大会上海站开源专场亮相！</h1>
              <h3 style="color: #fff">感恩每一位贡献者，敬请期待！</h3>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div
              :style="'background:linear-gradient(to bottom right, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.9)) ,url('+rel3+');background-size:cover;height:100%;'"
              class="banner">
            <div>
              <h1 style="color: aliceblue">Sonic用户社区已开放啦~！</h1>
              <h3 style="color: aliceblue">集求助、提需求、反馈于一身，还有不定期技术分享</h3>
              <a href="https://sonic-cloud.wiki/" target="_blank">
                <el-button size="small" type="primary">马上前往</el-button>
              </a>
            </div>
          </div>
        </el-carousel-item>
        <el-carousel-item>
          <div
              :style="'background:linear-gradient(to bottom right, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.9)) ,url('+rel4+');background-size:cover;height:100%;'"
              class="banner">
            <div>
              <h1 style="color: aliceblue">Sonic已加入Open Collective网站！</h1>
              <h3 style="color: aliceblue">开源共建，少不了你的支持</h3>
              <a href="https://opencollective.com/soniccloudorg" target="_blank">
                <el-button size="small" type="primary">查看</el-button>
              </a>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>

      <div style="margin-top: 40px">
        <h1>
          Sonic支持哪些设备？
        </h1>
      </div>
      <div style="padding: 0 20%;">
        <el-divider><span style="color: #909399">更多设备持续兼容中</span></el-divider>
      </div>
      <el-row :gutter="30" style="padding: 0 15%">
        <el-col :span="6">
          <el-card shadow="hover">
            <el-avatar :size="50" shape="square" :src="a1"></el-avatar>
            <p style="font-weight: bold;margin: 0">安卓设备</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <el-avatar :size="50" shape="square" :src="a2"></el-avatar>
            <p style="font-weight: bold;margin: 0">iOS设备</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <el-avatar :size="50" shape="square" :src="a3"></el-avatar>
            <p style="font-weight: bold;margin: 0">车载设备</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <el-avatar :size="50" shape="square" :src="a4"></el-avatar>
            <p style="font-weight: bold;margin: 0">智能手表</p>
          </el-card>
        </el-col>
      </el-row>


      <div style="margin-top: 60px">
        <h1>
          为什么使用Sonic？
        </h1>
      </div>
      <div style="padding: 0 20%;">
        <el-divider></el-divider>
      </div>

      <el-row :gutter="30">
        <el-col :span="6">
          <el-card shadow="hover">
            <img :src="team4" height="40"/>
            <h3>0编码UI自动化</h3>
            <p>积木式创建步骤</p>
            <p>一键分发多设备任务</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <img :src="team" height="40"/>
            <h3>在线代理抓包</h3>
            <p>一键连接代理抓包</p>
            <p>团队协作轻松快捷</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <img :src="team2" height="40"/>
            <h3>设备分布式集群</h3>
            <p>支持跨网段多机房</p>
            <p>支持Windows、Mac、Linux平台</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <img :src="team3" height="40"/>
            <h3>优秀周边生态</h3>
            <p>安卓Apk、iOS调试工具</p>
            <p>Jenkins插件、在线抓包工具</p>
          </el-card>
        </el-col>
        <el-col :span="6" style="margin-top: 20px">
          <el-card shadow="hover">
            <img :src="team5" height="40"/>
            <h3>低成本维护</h3>
            <p>拖拽式排序交互</p>
            <p>使用简单便捷</p>
          </el-card>
        </el-col>
        <el-col :span="6" style="margin-top: 20px">
          <el-card shadow="hover">
            <img :src="team6" height="40"/>
            <h3>在线WebView</h3>
            <p>提供在线调试WebView</p>
            <p>一键便利连接devtools</p>
          </el-card>
        </el-col>
        <el-col :span="6" style="margin-top: 20px">
          <el-card shadow="hover">
            <img :src="team7" height="40"/>
            <h3>可视化报表</h3>
            <p>测试截图、日志、录像</p>
            <p>图表展示项目运行情况</p>
          </el-card>
        </el-col>
        <el-col :span="6" style="margin-top: 20px">
          <el-card shadow="hover">
            <img :src="team8" height="40"/>
            <h3>轻松部署维护</h3>
            <p>Docker一键去中心化分布式</p>
            <p>扩容缩容不再繁琐</p>
          </el-card>
        </el-col>
      </el-row>

      <div style="margin-top: 80px">
        <h1>
          我们希望Sonic能服务越来越多的中小企业
        </h1>
      </div>
      <div style="padding: 0 20%;">
        <el-divider><span style="color: #909399">初心不变，用心打磨特色功能</span></el-divider>
      </div>
      <img :src="date" style="width: 40%;"/>

    <div style="margin-top: 50px">
      <h1>
        金牌赞助商
      </h1>
    </div>
    <div style="padding: 0 20%;">
      <el-divider><span style="color: #909399">感谢赞助商的支持，欢迎你的加入</span></el-divider>
    </div>
    <div>
      <a href="https://www.testing-studio.com/" target="_blank">
        <img src="https://ceshiren.com/uploads/default/original/3X/7/0/70299922296e93e2dcab223153a928c4bfb27df9.jpeg"
             alt="霍格沃兹测试开发学社" width="450"/>
      </a>
    </div>
    <div style="margin-top: 20px">
      <a href="https://ec.diwork.com/" target="_blank">
        <img src="https://ec.diwork.com/html/index/img/newlogo.png"
             alt="友空间" width="450"/>
      </a>
    </div>

      <div style="margin-top: 80px">
        <h1>
          Sonic效率与产出
        </h1>
      </div>
      <div style="padding: 0 20%;">
        <el-divider></el-divider>
      </div>
      <div style="display: flex;justify-content: center; margin-top: 50px">
        <img :src="msg" height="300"/>
        <el-timeline style="text-align: left">
          <el-timeline-item
              type="primary"
              :hollow="true"
          >
            Sonic提供图像识别，后续还会添加poco控件，助力游戏公司测试效率。
          </el-timeline-item>
          <el-timeline-item
              type="primary"
              :hollow="true"
          >
            使用Sonic进行跨网段部署，助力海外业务的公司进行专项检测。
          </el-timeline-item>
          <el-timeline-item
              type="primary"
              :hollow="true"
          >
            提供定时任务充分利用无人值守时间回归UI测试，省时省力。
          </el-timeline-item>
          <el-timeline-item
              type="primary"
              :hollow="true"
          >
            支持安卓与iOS一键连接代理抓包，减少以往配置代理的时间。
          </el-timeline-item>
          <el-timeline-item
              type="primary"
              :hollow="true"
          >
            支持打通Jenkins的DevOps流程，推进项目自动化流程。
          </el-timeline-item>
          <el-timeline-item
              type="primary"
              :hollow="true"
          >
            超低的使用门槛，超便捷的维护方式，趣味交互让用户不再感到繁琐。
          </el-timeline-item>
          <el-timeline-item
              type="primary"
              :hollow="true"
          >
            丰富图表展示，用户实时洞察用例执行情况，把控产品质量。
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>

    <div style="margin-top: 60px">
      <h1>
        还等什么？马上开始吧！
      </h1>

      <div>
        <el-button type="primary" size="large" @click="router.push('/Deploy')">马上使用</el-button>
      </div>
    </div>

    <el-footer style="margin-top: 75px">
      <el-divider></el-divider>
      <div style="margin-top: 5px;font-size: 14px;color: #606266">鸣谢：<a href="https://www.flaticon.com/free-icons/send"
                                                                        title="send icons">Send icons created by
        Freepik - Flaticon</a></div>
      <div style="display: flex;justify-content: center;align-content: center;margin-top: 10px">
        <img :src="logo" width="20"/> <span style="margin-left: 10px;font-size: 14px;color: #606266">Copyright © All Rights Reserved Sonic Project for SonicCloudOrg 版权所有</span>
      </div>
    </el-footer>
  </el-scrollbar>
</template>